<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>vue学习，用户管理</title>
	<script src="vue/vue.js"></script>
	<link rel="stylesheet" href="bootstrap/bootstrap.min.css">
	<script src="jquery/jquery.min.js" ></script>
	<script src="bootstrap/bootstrap.min.js"></script>
	<script>

		window.onload=function(){
			new Vue({
				el:'.container',
				data:{
					users:[
						{name:'tom',age:22,email:'123@qq.com'},
						{name:'jack',age:21,email:'222@qq.com'}
					],
					user:{},
					nowIndex:-1//当前要删除用户的索引
				},
				methods:{
					addUser(){
						this.users.push(this.user);
						this.user={};
					},
					delUser(){
						if(this.nowIndex===-1){//删除所有
							this.users=[];
						}else{
							this.users.splice(this.nowIndex,1);//从指定索引位置开始删除，删除一个
						}
						
					}
				}
			});
		}
	</script>
<body>
	<div class="container">
		<h2 class="text-center">添加用户</h2>
		<form class="form-horizontal" action="">
			<div class="form-group">
				<label for="name" class="control-label col-sm-2 col-sm-offset-2">姓  名：</label>
				<div class="col-sm-6">
					<input type="text" class="form-control " id="name" v-model="user.name" placeholder="请输入姓名">
				</div>
			</div>
			<div class="form-group">
				<label for="name" class="control-label col-sm-2 col-sm-offset-2">年  龄：</label>
				<div class="col-sm-6">
					<input type="text" class="form-control " id="age" v-model="user.age" placeholder="请输入年龄">
				</div>
			</div>
			<div class="form-group">
				<label for="name" class="control-label col-sm-2 col-sm-offset-2">邮  箱：</label>
				<div class="col-sm-6">
					<input type="text" class="form-control " id="email" v-model="user.email" placeholder="请输入邮箱">
				</div>
			</div>
			<div class="form-group text-center">
				<input type="button" class="btn btn-primary" v-on:click="addUser" value="添  加">
				<input type="reset" class="btn btn-primary" value="重  置">
			</div>
		</form>
		<hr>
		<table class="table table-bordered table-hover">
			<caption class="h1 text-center text-info">用户列表</caption>
			<thead>
				<tr class="text-center">
					<th class="text-center">序号</th>
					<th class="text-center">姓名</th>
					<th class="text-center">年龄</th>
					<th class="text-center">邮箱</th>
					<th class="text-center">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(user,index) in users" class="text-center">
					<td>{{index+1}}</td>
					<td>{{user.name}}</td>
					<td>{{user.age}}</td>
					<td>{{user.email}}</td>
					<td>
						<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=index">删除</button>
					</td>
				</tr>
				<tr>
					<td colspan="5" class="text-right">
						<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1">删除所有</button>
					</td>
				</tr>
			</tbody>
		</table>
		<!-- 模态框 -->
		<div class="modal" id="del">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">
							<span>&times;</span>
						</button>
						<h4 class="modal-title" v-show="nowIndex!=-1">确认删除用户：{{users[nowIndex]?users[nowIndex].name:''}}吗？</h4>
						<h4 class="modal-title" v-show="nowIndex===-1">确认删除所有用户吗？</h4>
					</div>
					<div class="modal-body text-center">
						<button class="btn btn-primary" data-dismiss="modal">取 消</button>
						<button class="btn btn-primary" data-dismiss="modal" v-on:click="delUser">确 认</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>